@charset "utf-8";
$fontsize:40;
@function rem($px) {
    @return $px/$fontsize * 1rem;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    header {
        width: 100%;
        height: rem(150);
        background: white;
        position: absolute;
        top: 0;
        .logo {
            width: rem(124);
            height: rem(124);
            float: left;
            margin-left: rem(20);
            margin-top: rem(16);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .searchbar {
            width: rem(290);
            height: rem(55);
            border: rem(2) solid #ff9344;
            border-radius: rem(50);
            padding: 0 rem(14);
            box-sizing: border-box;
            margin: 0 auto;
            margin-top: rem(56);
            input[type="search"] {
                width: rem(210);
                height: 100%;
                border: none;
                font-size: rem(24);
                vertical-align: top;
                border-radius: rem(6);
            }
            i {
                font-size: rem(28);
                color: #FF9344;
                line-height: rem(50);
                vertical-align: text-top;
            }
        }
        .selectBar {
            width: rem(158);
            height: rem(54);
            border: rem(2)solid #FF9344;
            line-height: rem(50);
            box-sizing: border-box;
            float: right;
            margin-right: rem(22);
            margin-top: rem(48);
            background: url(../img/sanjiao.png) no-repeat right 5px center;
            background-size: rem(30) rem(16);
            select {
                font-size: rem(26);
                width: 100%;
                height: 100%;
                vertical-align: top;
                text-indent: rem(14);
                background: transparent;
                border: none;
                appearance: none;
                -webkit-appearance: none;
                outline: none;
            }
        }
    }
    section {
        width: 100%;
        position: absolute;
        top: rem(150);
        bottom: rem(136);
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        .slideshow {
            width: 100%;
            
            position: relative;
            .swiper-container {
                width: 100%;
            }
            .swiper-wrapper {
                width: 100%;
                margin-top: 0;
                .swiper-slide {
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .middle {
            width: 100%;
            margin-top: rem(33);
            .middle-title {
                width: rem(709);
                margin: 0 auto;
                padding-top: rem(33);
                .middle-title-left {
                    float: left;
                    img {
                        width: rem(56);
                        height: rem(54);
                        float: left;
                    }
                    p {
                        font-size: rem(28);
                        float: left;
                        line-height: rem(54);
                    }
                }
                .middle-title-more {
                    float: right;
                    p {
                        font-size: rem(24);
                        color: #000000;
                        i {
                            color: #FF9344;
                        }
                    }
                }
            }
            .middle-content {
                margin: 0 auto;
                width: 80%;
                .centent-picture {
                    width: 40%;
                    height: rem(93);
                    padding-top: rem(30);
                    padding-bottom: rem(30);
                    img {
                        width: rem(239);
                        height: rem(93);
                    }
                }
            }
        }
        .bottom {
            width: rem(709);
            margin: 0 auto;
            .bottom-title {
                .bottom-title-left {
                    float: left;
                    img {
                        width: rem(55);
                        height: rem(48);
                        float: left;
                    }
                    p {
                        font-size: rem(28);
                        float: left;
                        margin-left: rem(8);
                        line-height: rem(54);
                    }
                }
                .bottom-title-more {
                    float: right;
                    p {
                        font-size: rem(24);
                        color: #000000;
                        i {
                            color: #FF9344;
                        }
                    }
                }
            }
            .bottom-cnetent {
                margin-top: rem(34);
                .centent-centent1 {
                    height: rem(166);
                    .bottom-centnet-picture {
                        width: rem(210);
                        height: rem(164);
                        margin-right: rem(21);
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .bottom-centent-right {
                        margin-top: rem(20);
                        p {
                            text-align: right;
                            font-size: rem(22);
                            color: #b3b3b3;
                        }
                        p:first child {
                            line-height: rem(68);
                        }
                        p:last-child {
                            line-height: rem(68);
                        }
                    }
                    .bottom-centent-middle {
                        padding-top: 5px;
                        h6 {
                            font-size: rem(30);
                            line-height: rem(50);
                            padding: rem(11) 0;
                        }
                        p {
                            font-size: rem(22);
                            color: #b3b3b3;
                        }
                        span {
                            font-size: rem(32);
                            line-height: rem(58);
                            color: #FF9344;
                        }
                    }
                }
                .centent-centent1:first-child {
                    margin-bottom: rem(28);
                }
            }
        }
    }
    footer {
        width: 100%;
        height: rem(136);
        background: white;
        position: absolute;
        bottom: 0;
        a {
            color: #000000;
        }
        ul li {
            width: 25%;
            height: 100%;
            float: left;
            text-align: center;
            padding-top: rem(16);
            box-sizing: border-box;
            i {
                color: transparent;
                font-size: 30px;
                -webkit-text-stroke: 1px #FF9344;
            }
            .iconfont{
                font-size: rem(60);
            }
            &.active .iconfont {
                color: #FF9344;
            }
            p {
                font-size: rem(26);
            }
            &:hover .iconfont {
                color: #FF9344;
            }
        }
    }
}